<template>
  <div style="display: flex; flex-wrap: wrap; gap: 100px">
    <div>
      <p>第一题</p>
      <input type="text" v-model="onei" />
      <input type="button" value="显示" @click="onefn" />
      <p v-if="oneif">{{ onep }}</p>
    </div>
    <div>
      <p>第二题</p>
      <textarea v-model="twot"></textarea>
      <input type="button" value="显示" @click="twofn" />
      <p v-if="twoif">{{ twop }}</p>
    </div>
    <div>
      <p>第三题</p>
      <input type="radio" id="man" v-model="threer" value="男" />男
      <input type="radio" id="woman" v-model="threer" value="女" />女
      <input type="button" @click="threefn" value="显示" />
      <p v-if="threeif">{{ threep }}</p>
    </div>
    <div>
      <p>第四题</p>
      <template v-for="(item, index) in fourc" :key="index">
        <input type="checkbox" v-model="fourp" :value="item" />{{ item }}
      </template>
      <input type="button" @click="fourif = true" value="显示" />
      <p v-if="fourif">{{ fourp }}</p>
    </div>
    <div>
      <p>第五题</p>
      <select v-model="fivep">
        <option v-for="(item, index) in fivec" :key="index" :value="item">{{ item }}</option>
      </select>
      <input type="button" @click="fiveif = true" value="显示" />
      <p v-if="fiveif">{{ fivep }}</p>
    </div>
    <div>
      <p>第六题</p>
      <form>
        用户名: <input type="text" v-model="six.user" /><br />
        密码:<input type="text" v-model="six.pwd" />
        <input type="button" value="提交" @click="sixfn" />
      </form>
    </div>
    <div>
      <p>第七题</p>
      <form>
        用户名: <input type="text" v-model="seven.user" /><br />
        密码:<input type="text" v-model="seven.pwd" />{{ spwd }}
        <br />
        <input type="button" value="提交" @click="sevenfn" />
      </form>
    </div>
    <div>
      <p>第八题</p>
      <form v-for="item in eiarr"><input v-model="item.content" type="text" /><br /></form>
      <input type="button" value="添加输入框" @click="addinput" />
      <input type="button" value="提交" @click="esubfrom" />
      <p v-for="item in ee">
        {{ item }}
      </p>
    </div>
    <div>
      <p>第九题</p>
      <form>
        用户名: <input type="text" v-model="ndata.form.user" placeholder="请输入用户名" /><br />
        密码: <input type="text" v-model="ndata.form.pwd" placeholder="请输入密码" /><br />
        确认密码: <input type="text" v-model="ndata.form.conpwd" placeholder="确认密码" /><br />
        <input type="button" value="提交" @click="nighto" />
        <input type="button" value="重置" @click="nightt" />
      </form>
    </div>
  </div>
</template>

<script setup>
import { computed, reactive, ref } from 'vue'

//第一题
let onei = ref('')
let onep = ref('')
let oneif = ref(false)
function onefn() {
  onep.value = onei.value
  onei.value = ''
  oneif.value = true
}
//第二题
let twot = ref('')
let twop = ref('')
let twoif = ref(false)
function twofn() {
  twop.value = twot.value
  twot.value = ''
  twoif.value = true
}
//第三题
let threer = ref('')
let threep = ref('')
let threeif = ref(false)
function threefn() {
  threep.value = threer.value
  threeif.value = true
}
//第四题
let fourc = reactive(['a', 'b', 'c', 'd', 'e'])
let fourp = ref([])
let fourif = ref(false)
//第五题
let fivec = reactive(['a', 'b', 'c', 'd', 'e'])
let fivep = ref('a')
let fiveif = ref(false)
//第六题
let six = reactive({
  user: '',
  pwd: '',
})
function sixfn() {
  if (!six.user) {
    alert('用户名为空')
  } else if (!six.pwd) {
    alert('密码为空')
  } else {
    six.user = ''
    six.pwd = ''
  }
}
//第七题
let seven = reactive({
  user: '',
  pwd: '',
})
let strongab = ref(/(?=.*[a-z])(?=.*[A-Z])/)
let strongac = ref(/(?=.*[a-z])(?=.*[1-9])/)
let strongbc = ref(/(?=.*[A-Z])(?=.*[1-9])/)
let strong = ref(/(?=.*[a-z])(?=.*[A-Z])(?=.*[1-9])/)
const spwd = computed(() => {
  if (seven.pwd) {
    if (strong.value.test(seven.pwd)) {
      return '强'
    } else if (strongab.value.test(seven.pwd)) {
      return '中'
    } else if (strongac.value.test(seven.pwd)) {
      return '中'
    } else if (strongbc.value.test(seven.pwd)) {
      return '中'
    } else {
      return '弱'
    }
  }
})
function sevenfn() {
  alert('提交成功')
  seven.user = ''
  seven.pwd = ''
}
//第八题
let eiarr = ref([{ content: '' }])
function addinput() {
  eiarr.value.push({ content: '' })
}
let ee = ref([])
function esubfrom() {
  ee.value = []
  for (let index = 0; index < eiarr.value.length; index++) {
    ee.value.push(eiarr.value[index].content)
  }
  console.log(ee.value)

  eiarr.value = [{ content: '' }]
}
//第九题
let ndata = reactive({
  form: { user: '', pwd: '', conpwd: '' },
})
function nighto() {
  if (!ndata.form.user) {
    return alert('用户名为空')
  }
  if (!ndata.form.pwd) {
    return alert('密码为空')
  }
  if (!ndata.form.conpwd) {
    return alert('未确认密码')
  }
  if (ndata.form.pwd !== ndata.form.conpwd) {
    return alert('密码不一致')
  }
  alert('提交成功')
  Object.assign(ndata.form, { user: '', pwd: '', conpwd: '' })
}
function nightt() {
  Object.assign(ndata.form, { user: '', pwd: '', conpwd: '' })
}
</script>
